<template>
    <div class="container">
        <div class="top">
            <span class="count">预约出行方式</span>
            <img src="@/assets/images/dataScreen-title.png" alt="">
        </div>
        <div class="main">
            <div class="ballEcaharts" ref="ballEcahartsEL"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';

import * as echarts from 'echarts/core';
import { TooltipComponent } from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([TooltipComponent, PieChart, CanvasRenderer, LabelLayout]);

const ballEcahartsEL = ref()

const ballEcahartsFun = () => {

    var img =
        "";

    var trafficWay = [
        {
            name: "火车",
            value: 20,
        },
        {
            name: "飞机",
            value: 15,
        },
        {
            name: "客车",
            value: 25,
        },
        {
            name: "轮渡",
            value: 5,
        }, {
            name: "高铁",
            value: 30,
        },
        {
            name: "其他",
            value: 5,
        },
    ];

    var data = [];
    var color = [
        "#00ffff",
        "#00cfff",
        "#006ced",
        "#ffe000",
        "#ffa800",
        "#ff5b00",
        "#ff3000",
    ];
    for (var i = 0; i < trafficWay.length; i++) {
        data.push(
            {
                value: trafficWay[i].value,
                name: trafficWay[i].name,
                itemStyle: {
                    normal: {
                        borderWidth: 5,
                        shadowBlur: 20,
                        borderColor: color[i],
                        shadowColor: color[i],
                    },
                },
            },
            {
                value: 2,
                name: "",
                itemStyle: {
                    normal: {
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: false,
                        },
                        color: "rgba(0, 0, 0, 0)",
                        borderColor: "rgba(0, 0, 0, 0)",
                        borderWidth: 0,
                    },
                },
            }
        );
    }
    var seriesOption = [
        {
            name: "",
            type: "pie",
            clockWise: false,
            radius: [50, 51],
            hoverAnimation: false,
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: "outside",
                        color: "#ddd",
                        formatter: function (params) {
                            var percent = 0;
                            var total = 0;
                            for (var i = 0; i < trafficWay.length; i++) {
                                total += trafficWay[i].value;
                            }
                            percent = ((params.value / total) * 100).toFixed(0);
                            if (params.name !== "") {
                                return (
                                    "交通方式：" +
                                    params.name +
                                    "\n" +
                                    "\n" +
                                    "占百分比：" +
                                    percent +
                                    "%"
                                );
                            } else {
                                return "";
                            }
                        },
                    },
                    labelLine: {
                        length: 30,
                        length2: 10,
                        show: true,
                        color: "#00ffff",
                    },
                },
            },
            data: data,
        },
    ];
    let option = {
        // backgroundColor: "#0A2E5D",
        color: color,
        title: {
            text: "交通方式",
            top: "48%",
            textAlign: "center",
            left: "49%",
            textStyle: {
                color: "#fff",
                fontSize: 12,
                fontWeight: "400",
            },
        },
        graphic: {
            elements: [
                {
                    type: "image",
                    z: 3,
                    style: {
                        image: img,
                        width: 120,
                        height: 120,
                    },
                    left: "center",
                    top: "center",
                    position: [100, 100],
                },
            ],
        },
        tooltip: {
            show: false,
        },
        legend: {
            icon: "circle",
            orient: "horizontal",
            x: 'center',
            data: ["火车", "飞机", "客车", "轮渡", "高铁", "其他"],
            right: 30,
            bottom: 0,
            // align: "left",
            textStyle: {
                color: "#fff",
            },
            itemGap: 10,
        },
        toolbox: {
            show: false,
        },
        series: seriesOption,
    };


    const ballEcaharts = echarts.init(ballEcahartsEL.value);
    ballEcaharts.setOption(option)

}

onMounted(() => {
    ballEcahartsFun()
})

</script>

<style lang="scss" scoped>
.container {
    width: 90%;
    flex: 1.5;
    background-image: url('@/assets/images/dataScreen-main-lt.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 0.5vw 0;

    .top {
        width: 100%;
        height: 15%;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .count {
            display: block;
            font-size: 1vw;
            font-weight: 550;
        }

        img {
            width: 5vw;
            height: 0.5vw;
        }
    }


    .main {
        width: 100%;
        height: 85%;

        .ballEcaharts {
            width: 100%;
            height: 100%;
            // background-color: pink;
        }
    }
}
</style>